import React, {Component} from 'react';
import app from '../app';
import {Form, Input, Layout, Button} from 'antd';
import {admin} from '../value';
import {config} from "../config";
import tt from '../image/logoHome.png';
import phones from '../image/photo.png';
import '../css/login.css';
import md5 from 'MD5';

const FormItem = Form.Item;
const Content =Layout.Content;

// 登陆界面
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            admin_username: '',
            admin_password: '',
            errorMsg: '',
            inputTarget: '',
            isValid: true,
            loading: false,
            twoCode: '',  //显示在页面上的验证码图片
            requestCode: '',  //服务器传回来的验证码
        };
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Layout style={{background: '#fff', height: '100%', textAlign: 'center'}}>
                <Content style={{background: '#fff', minHeight: 600}}
                         className="m-margin-top-xs">
                    <div className="header">
                        <div className="area">
                            <a href="" target="_blank"><img className="logo" src={tt}/></a>
                            <div className="greeting">欢迎登录</div>
                            <div className="menu">
                                客服热线：4008933288&nbsp;&nbsp;
                                <a href="tencent://message/?uin=">QQ群：487317250</a>&nbsp;&nbsp;
                            </div>
                        </div>
                    </div>

                    <div className="contents">
                        <div className="bg"></div>
                        <div className="area">
                            <div className="phones_img">
                                <img src={phones}/>
                                <div className="contents_text">
                                    <span className="span_title">风口新零售，移动数据化</span>
                                    <span className="span_content">88批发网约你共创未来</span>
                                    <span className="inner_content">高效即时下单，传统与互联网的个性结合</span>
                                    <span className="inner_content">海量商品数据批量导入，库存数据随时掌握</span>
                                    <span className="inner_content">多种价格选择模式，保护价格隐私</span>

                                    <span className="inner_content">云端存储，食品行业免P图，输入条码就有图</span>
                                    <span className="inner_content">微信小程序助力，共享9亿流量</span>
                                    {/*<a className="know_more">了解更多</a>*/}
                                </div>
                            </div>
                            <div className="loginbox" style={{paddingBottom:20}}>
                                <Form>
                                    <h1>平台后台管理系统</h1>
                                    <div className="item userName">
                                        <label></label>
                                        <FormItem>
                                            {getFieldDecorator('admin_username', {
                                                rules: [{required: true, message: '请输入账号!'}],
                                            })(
                                                <Input onKeyDown={(e) => {
                                                    this.handleKeyDown(e)
                                                }} id="txt_userName" className="empty" type="text"
                                                       placeholder="输入管理员账号"/>
                                            )}
                                        </FormItem>
                                    </div>
                                    <div className="item passWord">
                                        <label></label>
                                        <FormItem>
                                            {getFieldDecorator('admin_password', {
                                                rules: [{required: true, message: '请输入密码!'}],
                                            })(
                                                <Input onKeyDown={(e) => {
                                                    this.handleKeyDown(e)
                                                }} id="txt_password" type="password" className="empty"
                                                       placeholder="请输入密码"/>
                                            )}
                                        </FormItem>

                                    </div>

                                    <div className="item userName">
                                        <label></label>
                                        <FormItem>
                                            {getFieldDecorator('inputCode', {
                                                rules: [{required: true, message: '请输入验证码!'}],
                                            })(
                                                <Input onKeyDown={(e) => {
                                                    this.handleKeyDown(e)
                                                }} placeholder="输入验证码"/>
                                            )}
                                        </FormItem>
                                        <div
                                            className='exit'
                                            dangerouslySetInnerHTML={{__html: this.state.twoCode}}
                                            style={{
                                                position: 'absolute',
                                                height: '40px',
                                                top: '50%',
                                                right: '-5px',
                                                transform: 'translate(0,-50%)'
                                            }}
                                            onClick={() => {
                                                this.searchCode()
                                            }} type='primary'/>
                                    </div>

                                    <Button
                                        style={{marginTop: '24px'}}
                                        loading={this.state.loading}
                                        onClick={(e) => this.handleSubmit(e)} id="longinSubmit"
                                        className="submit">登 录</Button>
                                </Form>

                            </div>
                        </div>
                    </div>

                    <div className="bottom">
                        <div className="area info">
                            <span>© Copyright.  广州老朱贸易有限公司 - All Rights Reserved.
                                <a style={{marginLeft: '30px'}} href="http://www.miitbeian.gov.cn">粤ICP备17134571号</a>
                                </span>
                        </div>
                    </div>
                </Content>
            </Layout>
        )
    }

    componentDidMount() {
        //app.setToken('123');
        this.searchCode();
    }

    handleKeyDown(e) {
        if (e.keyCode == '13') {
            this.handleSubmit(e)
        }
    }

    //登录账号
    handleSubmit = (e) => {
        e.preventDefault();
        let that = this;
        that.props.form.validateFields((err, values) => {
            if (!err) {
                const text=this.state.requestCode.toLowerCase();
                const inputCode=values.inputCode.toLowerCase();
                if(text!==inputCode){
                    app.alert('验证码不正确','info',1);
                    return;
                }
                values.admin_password = md5(values.admin_password);
                this.setState({loading: true});
                app.post(admin.LOGIN, values).then(req => {
                    that.setState({loading: false});
                    if (req.code == 1) {
                        let data = req.data;
                        app.setToken(data.token);
                        app.setData('username',values.admin_username);
                        let url=app.getData('pathPlatform');
                        if(!url){
                            app.setData('pathPlatform',config.path + '/home/admin');
                            //that.props.history.push(config.path + '/home/admin');
                            window.history.pushState(config.path + '/home/admin', "", config.path + '/home/admin');
                        }else{
                            that.props.history.push(url);
                        }
                        window.location.reload();
                    } else if (req.code == 2) {
                        app.alert(req.msg, 'error', '3');
                    }
                })
            }
        });
    };

    /**
     * 查找验证码
      */
    searchCode() {
        app.post(admin.SEND_SMS, {}).then(req => {
            if (req.code == 1) {
                let data = req.data;
                this.setState({
                    twoCode: data.url,
                    requestCode: data.text
                })
            } else {
                app.alert(req.msg, 'error', 3);
            }
        })
    }
}

const WrappedNormalLoginForm = Form.create()(Login);
export default WrappedNormalLoginForm;